<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <el-card class="box-card" style="height:148px">
      <el-form ref="formData" style="font-weight:400" :model="formData">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="车辆编号:">
              <el-input
                v-model="formData.id"
                style="width:230px"
                placeholder="请输入车型编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="应载重量:">
              <el-select
                v-model="formData.allowableLoad"
                placeholder="请选择应载重量"
                style="width:230px"
              >
                <el-option
                  v-for="item in allowableLoadList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="应载体积:">
              <el-select
                v-model="formData.allowableVolume"
                placeholder="请选择应载体积"
                style="width:230px"
              >
                <el-option
                  v-for="item in allowableVolumeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="车辆类型:">
              <el-input
                v-model="formData.name"
                style="width:230px"
                placeholder="请输入车型类型"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="danger" @click="getList">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格部分 -->
    <el-card class="box-card">
      <el-row style="margin-bottom:15px">
        <el-button type="danger" @click="isShow('add')">新增车型</el-button>
      </el-row>
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        :row-style="{ height: 50 + 'px' }"
        :cell-style="{ padding: 0 + 'px' }"
      >
        <el-table-column height="50px" type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="id" label="车型编号"> </el-table-column>
        <el-table-column prop="name" label="车辆类型"> </el-table-column>
        <el-table-column prop="num" label="车型数量"> </el-table-column>
        <el-table-column prop="allowableLoad" label="应载重量(吨)">
        </el-table-column>
        <el-table-column prop="allowableVolume" label="应载体积(立方米)">
        </el-table-column>
        <el-table-column prop="measureLong" label="长(米)"> </el-table-column>
        <el-table-column prop="measureWidth" label="宽(米)"> </el-table-column>
        <el-table-column prop="measureHigh" label="高(米)"> </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="操作"
          fixed="right"
        >
          <template v-slot="{ row }">
            <el-button type="text" size="mini" @click="isShow('edit', row.id)"
              >编辑</el-button
            >
            <span class="separate">|</span>
            <el-button
              type="text"
              class="del"
              size="mini"
              @click="isShow('del', row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          style="margin-bottom:20px"
          :current-page="pageData.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.counts"
          @size-change="handleSizeChange"
          @current-change="changePage"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 子组件 -->
    <CarModelsAdd
      ref="CarModelsAdd"
      :show-dialog.sync="showDialog"
      :current-id="currentId"
      @updateFromDate="getList"
      @changeCurrentId="changeCurrentId"
    ></CarModelsAdd>
  </div>
</template>
<script>
import { list as getCarList, del as delCarModel } from '@/api/transit'
import CarModelsAdd from './components/car-models-add.vue'
export default {
  components: {
    CarModelsAdd
  },
  data() {
    return {
      // 关键词搜索
      // search: {

      // },
      // id
      currentId: null,
      type: '',
      // 弹框显示关闭
      showDialog: false,
      // 表头表单
      formData: {
        id: '', // 车型编号
        name: '', // 车辆类型名称
        allowableLoad: '', // 应载重量
        allowableVolume: '' // 应载体积
      },
      // 表格信息
      tableData: [],
      // 分页器
      pageData: {
        counts: 0, // 总条数
        page: 1, // 页码
        pageSize: 10, // 页码显示条数
        pages: 1, // 页数
        items: []
      },
      // 表头搜索 表单验证
      // rules: {
      //   id: [
      //     { required: true, message: '车型编号不能为空', trigger: 'blur' },
      //     { pattern: /^\d{19}$/, message: '车型编号的长度为19个字符', trigger: 'blur' }],
      //   name: [
      //     { required: true, message: '车型类型不能为空', trigger: 'blur' }],
      //   allowableLoadVal: [
      //     { required: true, message: '车载重量不能为空', trigger: 'blur' }],
      //   allowableVolumeVal: [
      //     { required: true, message: '车载体积不能为空', trigger: 'blur' }]
      // },
      // 搜索表单,应载重量数组
      allowableLoadList: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<1.8（吨）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '1.8-6（吨）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '6-14（吨）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '14-30（吨）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '30-50（吨）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '50-100（吨）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '100>（吨）'
        }
      ],
      // 搜索表单,应载体积数组
      allowableVolumeList: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<3（m³）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '3-5（m³）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '5-10（m³）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '10-15（m³）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '15-30（m³）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '30-50（m³）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '50-80（m³）'
        },
        {
          value: 'RANGE_LEVEL_8',
          name: '80-150（m³）'
        },
        {
          value: 'RANGE_LEVEL_9',
          name: '150>（m³）'
        }
      ]
    }
  },
  created() {
    this.getList()
    // this.pageList()
  },
  methods: {
    // 重置表单
    reset() {
      this.$refs.formData.resetFields(
        (this.formData = {
          id: '', // 车型编号
          name: '', // 车辆类型名称
          allowableLoad: '', // 应载重量
          allowableVolume: '' // 应载体积
        })
      )
      this.getList()
    },
    // 渲染列表
    async getList() {
      // let obj = {}
      // for (const key in this.formData) {
      //   if (this.formData[key] === '') {
      //     this.$delete(this.formData, this.formData[key])
      //     console.log('筛选', this.formData)
      //     obj = this.formData
      //   }
      // }
      // console.log('obj', obj)
      const { data } = await getCarList({ ...this.pageData, ...this.formData })
      // console.log(data)
      this.tableData = data.items
      this.pageData.counts = +data.counts
      // this.pageData.page = 1

      // this.tableData.forEach(item => {
      //   if (item.num === null) {
      //     item.num = 0
      //   }
      // })
    },
    // 分页
    // async pageList() {
    //   const res = await getCarList(this.pageData)
    //   // console.log(res)
    //   // this.pageData.counts = +res.data.counts
    // },
    changePage(newPage) {
      this.pageData.page = newPage
      this.getList()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.formData.pageSize = val
      this.getList()
    },
    // 新增 编辑
    async isShow(type, id) {
      // console.log(id)
      if (type === 'add') {
        this.showDialog = true
      } else if (type === 'edit') {
        this.showDialog = true
        this.currentId = id
        // this.formData = await getDetail(id)
        this.$nextTick(() => {
          this.$refs.CarModelsAdd.getDetail()
        })
      } else {
        this.$confirm('确定要删除车型吗?', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await delCarModel(id)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    // 搜索
    // async search() {
    // this.formData 只传递有值的数据
    // let obj = {}
    // for (const key in this.formData) {
    //   if (this.formData[key] === '') {
    //     this.$delete(this.formData, this.formData[key])
    //     console.log('筛选', this.formData)
    //     obj = this.formData
    //   }
    // }
    // console.log('obj', obj)
    //   const res = await getCarList({ page: this.pageData.page, pageSize: this.pageData.pageSize, ...this.formData })
    //   console.log('模糊搜索', res)
    //   this.tableData = res.data.items
    //   this.pageData.counts = +res.data.counts
    //   this.pageData.page = 1
    //   // this.reset()
    // }
    changeCurrentId(val) {
      this.currentId = val
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-form-item__label {
  font-weight: normal;
}
.del {
  color: red;
}
.separate {
  color: #ccc;
  margin: 0 8px;
}
.add-btn {
  margin-bottom: 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
  padding-bottom: 0px;
}

.el-select {
  width: 100%;
}

.car-models ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.car-models {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 40px 60px 0 30px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}
.box-card {
  margin: 20px;
  padding: 5px 20px 20px 15px;
}
</style>
